<template>
  <div class="comFooter">
    <!-- Tabbar 标签栏组件 底部复用 -->
    <van-tabbar v-model="active" class="content">
      <van-tabbar-item icon="home-o" to="/detail">明细</van-tabbar-item>
      <van-tabbar-item icon="search" to="/chart">图表</van-tabbar-item>
      <!-- 空白占位 -->
      <van-tabbar-item></van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/collect">目标</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="mine">我的</van-tabbar-item>
      <!-- 中间的 + -->
      <div class="add">
        <van-icon
          name="plus"
          class="addIcon"
          @click="$route.path.includes('collect') ? $router.push({name:'addCollectData'}) : $router.push({name:'add'})"
        />
      </div>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'comFooter',
  created () {
    if (this.$route.path.includes('detail')) this.active = 0
    if (this.$route.path.includes('chart')) this.active = 1
    if (this.$route.path.includes('collect')) this.active = 3
    if (this.$route.path.includes('mine')) this.active = 4
  },
  data () {
    return {
      active: 0,
    }
  },
}
</script>

<style lang="less" scoped>
.comFooter{
  height: 50px;
}
.content{
  position: relative;
}
@addSize: 60px;
.add{
  position: absolute;
  border-radius: 50%;
  background: #1989fa;
  width: @addSize;
  height: @addSize;
  left: 50%;
  margin-left: -@addSize/2;
  top: -12px;
  text-align: center;
  vertical-align: middle;
  z-index: 999;
}
.addIcon{
  color: white;
  font-weight: bold;
  font-size: 20px;
  line-height: @addSize;
}
.van-tabbar{
  display: flex;
}
.van-tabbar-item:nth-child(3){
  height:0;
}
</style>
